<template>
	<div>
		<div class="h2">申请详情
		<a-button  v-if="this.$route.query.type==1&&this.$route.query.source=='积分发放审批详情'" type="primary" style="float: right;margin-top: 4px;" @click="detailShen(info)">审批</a-button>
		
		</div>

		<div class="main-apply">
			<div class="h3">申请信息</div>
			<div class="message">
				<div class="con">
					<div class="tit">名 称：</div>
					<div class="cell">{{ info.Title }}</div>
				</div>
				<div class="con">
					<div class="tit">学期：</div>
					<div class="cell">{{ info.SemesterName }}</div>
				</div>
				<div class="con">
					<div class="tit">课程类型：</div>
					<div class="cell">{{ info.ActivityTypeName }}</div>
				</div>
				<div class="con" v-if="info.UserNo">
					<div class="tit">申请人员：</div>
					<div class="cell">
						<a-tag color="green" v-for="(item,index) in info.UserNo.split(',')">{{item}}</a-tag>
						<!-- <a-tag color="green" v-for="(item,index) in info.UserNo.split('\n')">{{item}}</a-tag> -->
					</div>
				</div>
				<div class="con">
					<div class="tit">状态：</div>
					<div class="cell">{{ info.StateName }}</div>
				</div>
				<div class="con">
					<div class="tit">类型：</div>
					<div class="cell">{{ info.ActivityTypePrizeName ||info.MemberTypeName}}</div>
				</div>
				<div class="con">
					<div class="tit">分值：</div>
					<div class="cell">{{ info.Score }}</div>
				</div>
				<div class="con">
					<div class="tit">添加人：</div>
					<div class="cell">{{ info.AddUserNo}}/{{ info.AddUserName}}</div>
				</div>
				<div class="con">
					<div class="tit">参加/获奖时间：</div>
					<div class="cell">{{ info.GetTime}}</div>
				</div>
				<div class="con">
					<div class="tit">添加时间：</div>
					<div class="cell">{{ info.AddTime}}</div>
				</div>
				<div class="con">
					<div class="tit">备注：</div>
					<div class="cell">{{ info.Remark}}</div>
				</div>
			</div>
			<div class="h3">附件信息</div>
			<div class="message">
				<div class="tableZdy">
					<div class="imagecon">
						<div class="imagelist" v-for="(item,i) in oldList" :key="i">
							<div class="iconcon">
								<img v-if="item.FilePath.indexOf('jpg')>0||item.FilePath.indexOf('png')>0" :src="requestUrl+item.FilePath" />
								<div v-else class="fileicon">{{ item.FilePath.split('.')[1] }}</div>
							</div>
							<div class="title">{{ item.FileName }}</div>
							<div class="oprate">
								<oprateBtn title="下载" icon="icon-xiazai-wenjianxiazai-04" color="#1890FF" @tap="downloadFile(item, 1)" ></oprateBtn>
							</div>
						</div>
						<div class="el-table__empty-text" style="margin:0 auto;" v-show="oldList.length==0"></div>
					</div>
				</div>
				<!-- <a-list class="fileListArea" size="small" bordered :dataSource="oldList">
					<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
						<div style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
							<div style="width: 96%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
								{{ item.Type == 2 ? '[完结]' : '[其他]' }}{{ item.FileName }}</div>
						</div>
						<a-icon type="download" @click="downloadFile(item, 1)"
							style="height: 12px;vertical-align: top;margin-top: 4px;margin-right:12px;cursor: pointer;">
						</a-icon>
					</a-list-item>
				</a-list> -->
			</div>
		<!-- 	<div class="h3">审批信息</div>
			<a-steps class="apply-con" progress-dot v-if="flowData.length > 0" :current="999" direction="vertical">
				<a-step v-for="(item, index) in flowData" :key="index">
					<template slot="title">
					{{ item.FlowTypeName||'' + (item.ExamUserName ? ' | ' + item.ExamUserName + ' | ' : '') + item.StateName }}
					</template>
					<div slot="title" class="flowuser flex" v-if="item.ExamUserData&&item.ExamUserData.length>0">
						可审批人：
						<div class="flowusercon flex-1">
							<div class="flowuserlist" v-for="(flowitem, flowindex) in item.ExamUserData"
								:key="flowindex">{{ flowitem.Name }} - {{ flowitem.UserNo }} - {{ flowitem.DepartName }}
							</div>
						</div>
					</div>
					<div slot="subTitle">{{ item.ExamComment }}</div>
					<div slot="description">{{ item.ExamTime }}</div>
				</a-step>
			</a-steps>
			<div v-if="flowData.length == 0" class="nothing">暂无审批信息</div> -->
		</div>
		<!-- <div v-if="this.$route.query.type==1&&this.$route.query.source=='积分发放审批详情'" style="text-align: center;"><a-button type="primary" style="width: 200px;" @click="detailShen(info)">审批</a-button></div>
		 -->
		<activityApplyExam :isShow="false" :text="text" :textArr="textArr" v-show="applyIf" @closeFun="closeFun">
		</activityApplyExam>
		<!-- <apply :text="text" v-show="applyIf" @closeFun="closeFun"></apply> -->
		<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"><img alt="example" style="width: 100%"
				:src="previewImage" /></a-modal>
	</div>
</template>

<script>
	import Cache from '@/utils/cache';
	import moment from 'moment';
	import Func from '@/utils/func';
	import activityApplyExam from '@/components/views/CreditSendRecordExam/activityApplyExam';
	import {
		ManageCreditSendRecordDoGetDetail,
		ManageCreditSendRecordExamDoGetDetail,
		ManageCreditSendRecordManageDoGetDetail,
		GetActivityTypeList,
		GetActivityFileList
	} from '@/api/follow';
	// import apply from './apply';
	const data = [];
	export default {
		components: {
			activityApplyExam
			// apply
		},
		data() {
			return {
				textArr: [],
				textall: {},
				applyIf: false,
				applyIf2:false,
				addIf: false,
				layoutContentHeight: window.innerHeight - 268 + 'px',
				icofileList: [],
				fileList: {},
				previewVisible: false,
				previewImage: '',
				fileList1: [],
				previewVisible1: false,
				previewImage1: '',
				data,
				flowData: [],
				applyIf: false,
				ActivityTypeList: [],
				formLayout: 'horizontal',
				form: this.$form.createForm(this, {
					name: 'coordinated'
				}),
				formValue: {},
				dataValue: {},
				info: {},
				rules: {
					// validator: (rule, val, callback) => {
					// 			// var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
					// 			let pattern = /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;
					// 			if (!pattern.test(val)) {
					// 				callback('请输入正确手机号');
					// 			} else {
					// 				callback();
					// 			}
					// 			callback();
					// 		}
				},
				text: {},
				oldList: [],
				requestUrl: this.global.requestUrl,
				token: Cache.get('token'),
				IsHour: true
			};
		},
		computed: {},
		created() {
			// this.getOtherList();
			this.getList();
		},
		mounted() {},
		methods: {
			moment,
			applyHander() {
				// let item={id:this.$route.query.ID}
				this.text = {
					ID: this.$route.query.ID
				};
				this.applyIf = true;
			},
			async downloadFile(item) {
				console.log(item);
				let hrefUrl = this.requestUrl + item.FilePath
				// let hrefUrl = this.requestUrl + '/Manage/ActivityFile/DownFile?userToken=' + encodeURIComponent(this.token) + '&id=' + item.ID;
				window.open(hrefUrl, '_blank');
			},
			async getOtherList() {
				let res = await GetActivityTypeList();
				this.ActivityTypeList = res.data.data;
				let data = {};
				data.activityID = this.$route.query.ID;
				let res1 = await GetActivityFileList(data);
				this.oldList = res1.data.data;
			},
			async getList() {
				let that = this;
				let data = {};
				data.id = this.$route.query.ID;
				let res = {}
				if (this.$route.query.source == '发放申请列表') {
					res = await ManageCreditSendRecordManageDoGetDetail(data);
				}
				if (this.$route.query.source == '我的发放申请列表') {
					res = await ManageCreditSendRecordDoGetDetail(data);
				}
				if (this.$route.query.source == '发放审批详情') {
					res = await ManageCreditSendRecordExamDoGetDetail(data);
				}
				this.info = res.data.data;
				this.oldList = res.data.fileData;
				// this.data = res.data.formData;
				this.flowData = [{
					FlowTypeName:res.data.data.ExamUserNo,
					ExamComment: res.data.data.ExamComment,
					ExamTime: res.data.data.ExamTime,
					ExamUserName: res.data.data.ExamUserName,
					ExamUserNo: res.data.data.ExamUserNo,
					StateName:res.data.data.StateName
				}]
				if (res.data.flowData) {
					this.flowData = res.data.flowData;
				}


			},
			closeFunction(data) {
				this.$emit('closeFun', data);
			},
			detailShen(info){
				this.textArr=[];
				this.textArr.push(info);
				if(this.$route.query.type==1&&this.$route.query.source=='积分发放审批详情'){
					this.applyIf=true;
				}
				
				
			},
			closeFun() {
				this.applyIf = false;
			},
			handleCancel() {
				this.previewVisible = false;
				this.previewImage = '';
			},
			async handlePreview(file) {
				// let nameType = file.name.substr(file.name.lastIndexOf('.') + 1)
				// if(this.global.imgTypeList.findIndex(m=>{return m==nameType})<0){
				// 	this.$message.error('该文件格式不支持预览')
				// 	return false
				// }else{
				// 	this.previewImage = file.url;
				// 	this.previewVisible = true;
				// }
				this.previewImage = file.url;
				window.open(this.previewImage, '_blank');
			},
			icohandleChange({
				fileList
			}, name) {
				this.icofileList = fileList;
				if (fileList.length == 0) {
					this[name] = {};
				} else {
					if (fileList[0].status == 'done') {
						this[name] = this.requestUrl + fileList[0].response.url;
						let url = this.requestUrl + fileList[0].response.url;
						this.formValue = Object.assign(this.formValue, {
							[name]: url
						});
					}
				}
			},
			handleChange({
				fileList
			}, name) {
				this.fileList[name] = fileList;
				if (fileList.length == 0) {
					this[name] = {};
				} else {
					if (fileList[0].status == 'done') {
						this[name] = this.requestUrl + fileList[0].response.url;
						let url = this.requestUrl + fileList[0].response.url;
						this.formValue = Object.assign(this.formValue, {
							[name]: url
						});
					}
				}
			},
			dataChange(e, name, type) {
				if (type == 'data') {
					let time = moment(e).format('YYYY-MM-DD HH:mm:ss');
					this.dataValue = Object.assign(this.dataValue, {
						[name]: time
					});
				} else {
					let time = moment(e).format('HH:mm:ss');
					this.dataValue = Object.assign(this.dataValue, {
						[name]: time
					});
				}
			},
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFields(async (err, values) => {
					if (!err) {
						let data = values;
						data = Object.assign(data, this.formValue, this.dataValue);
						if (data.activityDate) {
							data.StartTime = moment(data.activityDate[0]).format('YYYY-MM-DD HH:mm:ss');
							data.EndTime = moment(data.activityDate[1]).format('YYYY-MM-DD HH:mm:ss');
						}
						data.ClubID = '63e6e20243d04c0094fe3cb27b244720';
						let res = await UpdateActivity(data);
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.main {
		height: 90%;
		width: 60%;
		overflow-y: scroll;
		float: left;
	}

	.main-apply {

		// width: 36%;
		// float: right;
		.apply-con {
			margin-top: 20px;

			/deep/.ant-steps-item-content {
				width: 90%;
			}

			/deep/.ant-steps-item-subtitle {
				display: block;
				margin-left: 0px;
			}
		}
	
	.nothing {
			text-align: center;
			margin: 50px auto;
		}

		.message {
			padding: 10px;

			.con {
				width: 100%;
				line-height: 40px;
				height: 40px;
				border-bottom: 1px dashed #eee;
				padding: 0 10px;
				overflow: hidden;

				.tit {
					float: left;
					width: 110px;
				}

				.cell {
					float: left;
				}
			}
		}
	}

	.h3 {
		font-size: 14px;
		background: #f6f8f8;
		color: #1890ff;
		padding: 4px 10px;
	}

	/deep/.ant-form-item {
		margin: 4px 10px;
		display: flex;
	}

	/deep/.ant-form-item-label {
		width: 180px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	/deep/.ant-form-item-control-wrapper {
		flex: 1;
	}

	/deep/.ant-calendar-picker,
	/deep/.ant-time-picker {
		width: 100%;
	}

	.fixed-top {
		width: inherit;
		position: absolute;
		line-height: 30px;
		top: 0px;
		background-color: white;
		z-index: 999;
		padding: 10px 0 0 10px;
	}

	.fixed-bottom {
		width: 164px;
		left: 50%;
		bottom: 0px;
		margin: 0px 0px 0px -82px !important;
		background-color: white;
		z-index: 999;
	}

	/deep/.ant-form {
		margin-top: 10px;
		padding-bottom: 10px;
	}

	.ant-calendar-picker,
	.ant-time-picker {
		width: 100%;
	}
</style>
